import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Link, Switch, Route, routerRedux } from 'dva/router';
import {
  Row,
  Col,
  Card,
  Form,
  Button,
  Icon,
  Menu,
  Dropdown,
  notification,
  Select,
  Input,
  Modal,
} from 'antd';
import styles from './Index.less';
import AddGroup from '../../components/AddOrEditGroup';
import globalUtil from '../../utils/global';
import CodeCustomForm from '../../components/CodeCustomForm';
import { width } from 'window-size';

const { Option } = Select;

const formItemLayout = {
  labelCol: {
    span: 5,
  },
  wrapperCol: {
    span: 19,
  },
};

@connect(({ user, global }) => ({ currUser: user.currentUser, groups: global.groups }))
export default class Index extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      codeType: 'Git',
      showUsernameAndPass: false,
      showKey: false,
      addGroup: false,
    };
  }
  onAddGroup = () => {
    this.setState({ addGroup: true });
  };
  cancelAddGroup = () => {
    this.setState({ addGroup: false });
  };
  handleAddGroup = (vals) => {
    const { setFieldsValue } = this.props.form;

    this.props.dispatch({
      type: 'groupControl/addGroup',
      payload: {
        team_name: globalUtil.getCurrTeamName(),
        ...vals,
      },
      callback: (group) => {
        if (group) {
          // 获取群组
          this.props.dispatch({
            type: 'global/fetchGroups',
            payload: {
              team_name: globalUtil.getCurrTeamName(),
              region_name: globalUtil.getCurrRegionName(),
            },
            callback: () => {
              setFieldsValue({ group_id: group.ID });
              this.cancelAddGroup();
            },
          });
        }
      },
    });
  };
  hideShowKey = () => {
    this.setState({ showKey: false });
  };
  handleSubmit = (value) => {
    const teamName = globalUtil.getCurrTeamName();
    const username = value.username_1;
    const password = value.password_1;
    delete value.username_1;
    delete value.password_1;
    this.props.dispatch({
      type: 'createApp/createAppByCode',
      payload: {
        team_name: teamName,
        code_from: 'gitlab_manual',
        ...value,
        username,
        password,
      },
      callback: (data) => {
        if (data) {
          const appAlias = data.bean.service_alias;
          this.props.handleType && this.props.handleType === "Service" ? this.props.handleServiceGetData(appAlias) :
            this.props.dispatch(routerRedux.push(`/team/${globalUtil.getCurrTeamName()}/region/${globalUtil.getCurrRegionName()}/create/create-check/${appAlias}`));
        }
      },
    });
  };
  render() {
    return (
      <Card>
        <div className={styles.formWrap} style={{ width: this.props.handleType && this.props.handleType === "Service" ? "auto" : "500px" }}>
          <CodeCustomForm onSubmit={this.handleSubmit} {...this.props} />
        </div>
      </Card>
    );
  }
}
